<template>
    <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog">
        <el-form :model="classForm" ref="provideECardRef" :rules="provideECardRules">
            <el-form-item label="选择年级" prop="gradeInfo" style="margin-left: 10px;width: 250px">
                <el-select clearable v-model="classForm.gradeId" autocomplete="off" placeholder="请选择年级"
                    @change="getClassInfoList">
                    <el-option :key="year + 2" :value="year + 2" :label="year + 2"></el-option>
                    <el-option :key="year + 1" :value="year + 1" :label="year + 1"></el-option>
                    <el-option :key="year" :value="year" :label="year"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="选择班级" prop="classId" style="width: 260px">
                <el-select clearable v-model="classForm.classId" autocomplete="off" placeholder="请选择班级"
                    @change="getClassInfoList">
                    <el-option v-for="item in classList" :key="item.classId" :value="item.classId"
                        :label="item.className"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="学生姓名" prop="studentName" style="width: 260px">
                <el-input v-model="classForm.studentName" autocomplete="off" placeholder="请输入学生姓名"></el-input>
            </el-form-item>
            <el-form-item label="学生学号" prop="studentNumber" style="width: 260px" v-if="titleFlag">
                <el-input v-model="classForm.studentNumber" autocomplete="off" placeholder="请输入学生学号"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="idCard" style="width: 260px">
                <el-input v-model="classForm.idCard" autocomplete="off" placeholder="请输入身份证号"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" style="margin-left: 10px;width: 250px" v-if="titleFlag">
                <el-input v-model="classForm.mobile" autocomplete="off" placeholder="请输入联系电话"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="mobile" style="width: 260px" v-if="!titleFlag">
                <el-input v-model="classForm.mobile" autocomplete="off" placeholder="请输入联系电话"></el-input>
            </el-form-item>
        </el-form>
        <template #footer style="width:400px">
            <span class="dialog-footer">
                <el-button @click="clear()">取消</el-button>
                <el-button type="primary" @click="save">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm, ElTree } from "element-plus";
import { vxRule } from "@/utils/validator";

export default {
    name: "eCard",
    components: {
        ElForm,
        ElMessage,
    },
    data() {
        return {
            dialogFormVisible: ref(false),
            gradeList: [],
            provideECardRef: "",
            title: "",
            titleFlag: false,
            year: "",
            classList: [],
            idCardNumber: "",
            mobileNumber: "",
            classForm: {
                gradeId: "",
                classList: [],
                studentName: "",
                idCard: "",
                mobile: "",
                classId: "",
                studentNumber: ""
            },
            // 校验规则
            provideECardRules: {
                classId: vxRule(true, null, "blur"),
                studentName: vxRule(true, null, "blur"),
                idCard: vxRule(true, null, "blur"),
                mobile: vxRule(true, null, "blur"),
                studentNumber: vxRule(true, null, "blur"),
            },
        };
    },
    mounted() {
    },
    methods: {
        closeDialog() {
            this.clear();
        },
        cancel() {
            this.clear();
        },
        clear() {
            this.dialogFormVisible = false;
            this.classForm.gradeId = "";
            this.classForm.classList = []

            this.classForm.studentName = ""
            this.classForm.studentNumber = ""
            this.classForm.idCard = ""
            this.classForm.mobile = ""
            this.titleFlag = false
            // this.classForm.classId = ""
        },
        getClassInfoList() {
            httpService(
                "/pythonApi/eCardApi/getClassInfoList",
                {
                    gradeId: this.classForm.gradeId
                },
                "get"
            ).then((data) => {
                this.classList = data.data
            });
        },


        save() {
            this.$refs.provideECardRef.validate((valid) => {
                if (valid) {
                    let reg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/;
                    let card = reg.test(this.classForm.idCard);
                    if (!card) {
                        alert('身份证号错误')
                    } else {
                        if (!this.titleFlag && !/^((1[3-9][0-9]))\d{8}$|^(5|6|8|9)\d{7}$|^\d{3,4}-\d{7,8}$|^(852)?(2[1-9]|3[145679])\d{6}$/.test(this.classForm.mobile)) {
                            alert('手机号不正确!')
                        } else if (this.classForm.classId == 99) {
                            alert('99班禁止发卡')
                        } else {
                            let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
                            params.append("gradeId", this.classForm.gradeId);
                            params.append("classId", this.classForm.classId);
                            params.append("studentName", this.classForm.studentName);
                            params.append("idCard", this.classForm.idCard);
                            params.append("mobile", this.classForm.mobile);
                            if (this.titleFlag) {
                                params.append("studentNumber", this.classForm.studentNumber);
                            }
                            // console.log(this.classForm);
                            httpService("/pythonApi/eCardApi/insertSingleCard", params, "post").then(
                                (data) => {
                                    if (data.code == 200) {
                                        ElMessage.success(data.message);
                                        this.clear();
                                        //刷新父组件的数据
                                        this.$parent.getCardsList();
                                    } else {
                                        ElMessage.error(data.message);
                                    }
                                }
                            );
                        }
                    }
                }
            })
        },
    },
    // },
};
</script>
<style></style>